<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="css :: css">
</head>
<link href="/js/fileUpload/fileinput.css" rel="stylesheet">
<body style="opacity: 1">
<div style="padding-top: 0">
    <div class="container-fluid">
        <div class="cl-mcont">
            <div class="row">
                <div class="col-md-12" style="padding:0">
                    <div class="block-flat">
                        <form class="form-horizontal group-border-dashed" id="buyCode">
                            <input type="hidden" id="productTypes" name="productTypes">
                            <input type="hidden" id="statusArray" name="statusArray">
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="pictureName_query" name="pictureName"
                                           placeholder="图片名称"/>
                                </div>
                                <div class="input-group">
                                    <button class="btn btn-primary" type="button" id="search"><i
                                            class="fa fa-search"></i>查询
                                    </button>
                                </div>
                                <div class="input-group">
                                    <button class="btn btn-success" type="button" id="bannerAdd_button"><i
                                            class="fa fa-check-circle"></i>新增
                                    </button>
                                </div>
                                <div class="input-group">
                                    <button class="btn btn-success" type="button" id="bannerUpdate_button"><i
                                            class="fa fa-check-circle"></i>修改
                                    </button>
                                </div>
                                <div class="input-group">
                                    <button class="btn btn-success" type="button" id="bannerDelete_button"><i
                                            class="fa fa-check-circle"></i>删除
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="block-flat">
                        <div class="content">
                            <div class="table-responsive">
                                <table class="table hover" id="dataTable">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--新增banner-->
    <div class="modal fade" id="addBannerModel" tabindex="-1"
         role="dialog"
         aria-labelledby="updateUserModalLabel">
        <div class="modal-dialog" role="document" style="width:800px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="updateUserModalLabel">新增banner</h4>
                </div>
                <div class="modal-body" style="min-height:100px;">
                    <form class="form-horizontal" enctype="application/json"
                          id="addBannerForm" name="addBannerForm">
                        <input type="hidden" id="imageString" name="imageString">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="图片名称" id="pictureName_add"
                                       name="pictureName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-10">
                                <input type="file" id="imageStr" name="imageStr"
                                       class="file-loading"
                                       accept=".gif,.jpeg,.jpg,.png,.svg">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="banner排序" name="sort"
                                       id="sort_add">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-primary"
                            onclick="blackSave()">确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改banner -->
    <div class="modal fade" id="updateBannerModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">修改banner</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal"
                          enctype="application/json"
                          id="updateBannerForm">
                        <input type="hidden" id="UpImageString" name="imageString">
                        <input name="id" id="id_update" type="hidden"/>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="图片名称" id="pictureName_update"
                                       name="pictureName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-10">
                                <input type="file" id="UpImageStr" name="imageStr"
                                       class="file-loading"
                                       accept=".gif,.jpeg,.jpg,.png,.svg">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="banner排序" name="sort"
                                       id="sort_update">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="updateBannerSave">确定</button>
                </div>
            </div>
        </div>
    </div>

</div>
<div th:include="js :: js"></div>
<script type="text/javascript" th:attr="src=@{/js/jquery.form.js}"></script>
<script type="text/javascript" th:attr="src=@{/js/jquery.parser.js}"></script>
<script type="text/javascript" src="js/jquery.icheck/icheck.min.js"></script>
<script type="text/javascript" src="js/fileUpload/fileinput.min.js"></script>
<script type="text/javascript" src="js/fileUpload/zh.js"></script>
<script>
    $(function () {
        $('#dataTable').bootstrapTable({
            url: '/bannerConfig/listBanner',
            height: $(window).height() - 200,
            pageSize: 100,
            pagination: true,
            pageList: [30, 50, 100],
            clickToSelect: true,
            queryParams: queryParams,
            uniqueId: 'id',
            queryParamsType: '',
            sidePagination: 'server',
            responseHandler: function (res) {
                var list = res.rows;
                for (var i = 0; i < list.length; i++) {
                    for (var item in list[i]) {
                        if (list[i][item] == null) {
                            list[i][item] = '-';
                        }
                    }
                }
                res.rows = list;
                return res;
            },
            columns: [
                {
                    checkbox: true,
                    align: 'center'
                },
                {
                    field: 'pictureUrl',
                    title: '图片',
                    width: 90, align: 'center', formatter: function (v, row, index) {
                    return '<img class="avatar" style="width:80px" onerror="this.src=\'/images/default.png\'" src="' + row.pictureUrl + '"/>';
                }
                }, {
                    field: 'sort',
                    title: 'banner排序',
                    width: 50,
                    align: 'center'
                }, {
                    field: 'pictureName',
                    title: '图片名称',
                    width: 90, align: 'center'
                }, {
                    field: 'gmtCreate',
                    title: '创建时间',
                    width: 50,
                    align: 'center'
                }, {
                    field: 'gmtModified',
                    title: '修改时间',
                    width: 50,
                    align: 'center'
                }, {
                    field: 'remark',
                    title: '备注',
                    width: 50,
                    align: 'center'
                }
            ]
        });
        $("#search").click(function () {
            $("#dataTable").bootstrapTable("refresh");
        });
        //新增弹窗-banner
        $('#bannerAdd_button').click(function (e) {
            $("#addBannerModel .form-control").val("");
            $("#imageString").val("");
            var oFileInput = new FileInput();
            oFileInput.Init("imageStr", "bannerConfig/getByte");
            $("#addBannerModel").modal("show");
        });
        //修改弹窗
        $('#bannerUpdate_button').click(function () {
            var rows = $('#dataTable').bootstrapTable("getSelections");
            if (rows === null || rows.length === 0) {
                layer.msg("请选择要操作的数据");
                return;
            }
            if (rows.length > 1) {
                layer.msg("仅允许单条操作，请确认！");
                return;
            }

            $("#id_update").val(rows[0].id);
            $("#pictureName_update").val(rows[0].pictureName);
            $("#sort_update").val(rows[0].sort);
            var oFileInput = new FileInput();
            oFileInput.Init("UpImageStr", "bannerConfig/getByte");
            $("#updateBannerModel").modal("show");
        });
        //修改-保存banner
        $('#updateBannerSave').click(function () {
            var v = $("#updateBannerForm").valid();
            if (!v) {
                return;
            }
            $.ajax({
                type: "post",
                url: "/bannerConfig/updateBanner",
                data: $("#updateBannerForm").serialize(),
                dataType: "json",
                async: false,
                cache: false,
                success: function (data) {
                    if (data.success) {
                        $("#dataTable").bootstrapTable("refresh");
                        $("#updateBannerModel").modal("hide");
                        layer.msg('操作成功');
                    } else {
                        layer.msg(data.message)
                    }
                }
            });
        })
        //删除banner
        $('#bannerDelete_button').click(function (e) {
            var rows = $('#dataTable').bootstrapTable("getSelections");
            if (rows === null || rows.length === 0) {
                layer.msg("请选择要操作的数据");
                return;
            }
            if (rows.length > 1) {
                layer.msg("仅允许单笔操作，请确认！");
                return;
            }
            $.confirm({
                title: '确认!',
                content: '确定要删除Banner吗？',
                confirm: function () {
                    $.ajax({
                        type: "POST",
                        url: "/bannerConfig/deleteBanner",
                        data: {
                            id: rows[0].id
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.success) {
                                $("#dataTable").bootstrapTable("refresh");
                                layer.msg(data.message);
                            } else {
                                layer.msg(data.message);
                            }
                        }
                    })
                }
            })
        });

        function queryParams(params) {
            return {
                page: params.pageNumber,
                size: params.pageSize,
                pictureName: $.trim($("#pictureName_query").val()),
            };
        }
    })

    //新增-保存用户失败原因
    function blackSave() {
        var v = $("#addBannerForm").valid();
        if (!v) {
            return;
        }
        if ($("#imageString").val().length > 1000000) {
            layer.msg('上传文件超限，需<500K');
            return;
        }
        var formData = new FormData();
        formData.append("imageString", $("#imageString").val());
        formData.append("pictureName", $("#pictureName_add").val());
        formData.append("sort", $("#sort_add").val());
        console.log(formData);
        $.ajax({
            type: "post",
            url: "/bannerConfig/addBanner",
            data: formData,
            dataType: "json",
            contentType: false,
            processData: false,
            async: false,
            cache: false,
            success: function (data) {
                if (data.success) {
                    $("#dataTable").bootstrapTable("refresh");
                    $("#addBannerModel").modal("hide");
                    layer.msg('操作成功');
                } else {
                    layer.msg(data.message)
                }
            }, beforeSend: function () {
            }
        });
    }

    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();
        //初始化fileinput控件（第一次初始化）
        var num_str;
        oFile.Init = function (ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);
            //初始化上传控件的样式
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: true,//是否显示拖拽区域
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                maxFileSize: 0,
                maxFileCount: 1,
                autoReplace: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            });
            //导入文件上传完成之后的事件
            $("#" + ctrlName).on("fileuploaded", function (event, data, previewId, index) {
                var success = data.response.success;
                if (success) {
                    $("#" + ctrlName + "ing").val(data.response.message);
                    return;
                }
                layer.msg(data.response.message);
            });
        }
        return oFile;
    }
</script>
</body>
</html>
